<template>
  <div class="login_box">
    <el-tabs v-model="activeName" style="width:750px;margin-left:5px">
      <el-tab-pane label="书籍库存详情" name="1">
        <div
          id="drawBookData"
          style="width: 800px;height: 550px;margin-top: 10px;"
        ></div>
      </el-tab-pane>
      <el-tab-pane label="书籍借阅详情" name="2">
        <div
          id="drawBorrowData"
          style="width: 800px;height: 550px;margin-top: 0px;"
        ></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      bookname: [],
      booknum: [],
      borrownum: [],
      activeName: '1'
    }
  },
  mounted: function () {
    this.getBook()
  },
  created () {},

  methods: {
    getBook () {
      this.$ajax('/book/bookAll')
        .then(res => {
          for (let i = 0; i < res.data.length; i++) {
            this.bookname.push(res.data[i].bookname)
            this.booknum.push(res.data[i].surplus)
            this.borrownum.push(res.data[i].lendnum)
            this.drawBookData()
            this.drawBorrowData()
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    drawBookData () {
      let chart1 = this.$echarts.init(document.getElementById('drawBookData'))

      chart1.setOption({
        title: {
          text: '书籍库存'
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: 35
          },
          type: 'category',
          data: this.bookname
        },
        yAxis: { type: 'value', axisLabel: { formatter: '{value} 本' } },
        series: [
          {
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(180,180,180,0.2)'
            },
            type: 'bar',
            barWidth: 20,
            data: this.booknum,
            itemStyle: {
              // 柱状图上方显示数值
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                  [
                    { offset: 0, color: '#1E7FFE' },
                    { offset: 1, color: '#FFFFFF' }
                  ]
                ),

                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      })
    },
    drawBorrowData () {
      let chart2 = this.$echarts.init(document.getElementById('drawBorrowData'))

      chart2.setOption({
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 35
          },
          data: this.bookname
        },
        yAxis: { type: 'value' },
        series: [
          {
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(180,180,180,0.2)'
            },
            type: 'bar',
            barWidth: 20,
            data: this.borrownum,
            itemStyle: {
              // 柱状图上方显示数值
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                  [
                    { offset: 0, color: '#1E7FFE' },
                    { offset: 1, color: '#FFFFFF' }
                  ]
                ),

                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.login_box {
  width: 800px;
  height: 650px;
  /* background-color: #fff; */
  background-color: #ffffffb3;
  border-radius: 5px;

  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
